<script setup lang="ts">
import { deleteArticleAPI, fetchChannelsAPI, getArticleListAPI } from '@/api/article'
import type { Article, ArticleListParams, ArticleListResponse, channel} from '@/types/article'
import { ArrowRight} from '@element-plus/icons-vue'
import { onMounted, ref} from 'vue'
import { Edit, Delete,Picture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// 1.状态栏
const reqParams = ref<ArticleListParams>({
  channel_id: undefined,
  status: undefined,
  page: 1,
  per_page: 10,
})

// 2.频道列表
const channelList = ref<channel[]>()

const fetchChannels = async () => {
  const result = await fetchChannelsAPI()
  channelList.value = result.data.channels
}

onMounted(() => {
  fetchChannels()
  getArticleList()
})

// 3.日期拆分到需要提交的对象当中
const time = ref<string[]>([])
const changeTime = ()=>{
  if(!time.value){
    reqParams.value.begin_pubdate = undefined
    reqParams.value.end_pubdate = undefined
  }else{
    reqParams.value.begin_pubdate = time.value[0]
    reqParams.value.end_pubdate = time.value[1]
  }
}

//获取文章列表
const articleList = ref<Article[]>()
const articleResponse = ref<ArticleListResponse>()

const getArticleList = async () => {
  const result= await getArticleListAPI(reqParams.value)
  articleResponse.value = result.data
  if(result.data.results.length === 0){
    ElMessage.warning('暂无数据')
  }
  if(!reqParams.value.per_page)return
  if(
    result.data.results.length<reqParams.value.per_page||
    result.data.results.length === 0
  ){
    reqParams.value.page = 1
  }
  articleList.value = result.data.results
}
//当页面与条数发生变化时
const handleSizeChange = ()=>{
  getArticleList()
}

//当用户主动筛选更新时
const handleFilter = ()=>{
  reqParams.value.page = 1
  getArticleList()
}


//删除文章
const handleDelete = (id: number)=>{
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deleteArticleAPI(id.toString())
    getArticleList()
  })
}

// 跳转
const router = useRouter()
</script>

<template>
  <div class="article-page">
    <el-card>
      <template #header>
        <!-- 面包屑组件 -->
        <el-breadcrumb  :separator-icon="ArrowRight">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <!-- 表单组件 -->
      <el-form label-width="80px" class="biaodan">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <el-radio :value="undefined">全部</el-radio>
            <el-radio :value="0">草稿</el-radio>
            <el-radio :value="1">待审核</el-radio>
            <el-radio :value="2">审核通过</el-radio>
            <el-radio :value="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="频道：">
          <el-select
          v-model="reqParams.channel_id"
          placeholder="全部"
          size="large"
          style="width: 200px"
          clearable
          >
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="日期" style="width: 400px" >
          <el-date-picker
          @change="changeTime"
            size="large"
            v-model="time"
            type="daterange"
            placeholder="请选择日期"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="">
          <el-button @click="handleFilter" type="primary">筛选</el-button>
        </el-form-item>
        {{ reqParams }}{{ time }}
      </el-form>
    </el-card>

    <!-- 筛选结果区域 -->
    <el-card style="margin-top: 20px">
      <template v-slot:header>
        <div>根据筛选条件共查询到结果：{{ articleResponse?.total_count }}</div>
      </template>

      <!-- 表格 -->
      <el-table :data="articleList">
        <el-table-column label="封面">
          <template #default="{ row }">
            <el-image
              :src="row.cover.images[0]"
              :preview-src-list="row.cover.images"
              :preview-teleported="true"
              lazy
              loading="lazy"
              style="width: 100px; height: 100px"
              :fit="'cover'"
            >
            <template #error>
                <el-icon>
                  <Picture/>
                </el-icon>
              </template>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="标题" prop="title"></el-table-column>

        <el-table-column label="状态" prop="status">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="row.status === 1">待审核</el-tag>
            <el-tag v-else-if="row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="row.status === 3" type="danger">审核失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="发布时间" prop="read_count"></el-table-column>

        <el-table-column label="阅读数" prop="comment_count"></el-table-column>

        <el-table-column label="评论数" prop="like_count"></el-table-column>

        <el-table-column label="点赞数" prop="pubdate"></el-table-column>

        <el-table-column label="操作" prop="">
          <template #default="{ row }">
            <el-button
            type="primary"
            :icon="Edit"
            circle
            plain
            @click="router.push({path: '/publish', query: {id: row.id}})"
            ></el-button>
            <el-button
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="handleDelete(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <template #footer>
        <el-pagination
          background
          layout="sizes,prev, pager, next, jumper,total"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChange"
          @current-change="handleSizeChange"
          :total="articleResponse?.total_count"
          v-model:current-page="reqParams.page"
          v-model:page-size="reqParams.per_page"
        />
      </template>
    </el-card>
    {{ reqParams.page }}
  </div>
</template>

<style scoped lang="less">
.biaodan {
  padding: 20px;
}
</style>
